<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title></title>
    <style type="text/css">
      body {
        height: 2000px;
      }
      #backToTop {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
        position: fixed;
        bottom: 30px;
        right: 30px;
      }
      div.block {
        height: 200px;
        width: 100px;
      }
      .blue {
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>

    <div id="backToTop">回到顶部</div>

    <script type="text/javascript">
      var btTopBtn = document.getElementById("backToTop");
      btTopBtn.onclick = rt;
      function rt() {
        var d = document,
          dd = document.documentElement,
          db = document.body,
          top = dd.scrollTop || db.scrollTop,
          step = Math.floor(top / 20);
        (function () {
          top -= step;
          if (top > -step) {
            dd.scrollTop == 0 ? (db.scrollTop = top) : (dd.scrollTop = top);
            setTimeout(arguments.callee, 20);
          }
        })();
      }
    </script>
  </body>
</html>
